<template>
  <div class="category">
    <div class="header-box">
      <h2>部门列表</h2>
    </div>
    <div class="list system-scrollbar">
      <el-tree
        ref="tree"
        class="my-tree"
        :data="treeList.list"
        :props="defaultProps"
        :expand-on-click-node="false"
        node-key="id"
        accordion
        highlight-current
        @node-click="handleNodeClick"
        :current-node-key="treeList.id"
      ></el-tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
// 引入自定义请求库
import { getAction } from "@/utils/system/commonUse";
import { ElMessage } from "element-plus";

const url = reactive({
  getTreeList: "/system/department/listTree",
});

const emit = defineEmits(["getTreeDetails", "uplTreeId"]);

interface Tree {
  label: string;
  children?: Tree[];
}
const defaultProps = {
  children: "children",
  label: "label",
};

const handleNodeClick = (data: Tree) => {
  // 触发
  emit("getTreeDetails", data);
};

onMounted(() => {
  getTreeList();
});

const treeList = reactive({
  id: "",
  list: Array(),
});

/**
 * 获取排序列表数据
 */
const getTreeList = () => {
  getAction(url.getTreeList)
    .then((result: any) => {
      console.log("result", result);

      if (result.code != 1000) {
        return ElMessage.error(result.msg);
      }
      treeList.id = result.data.id;
      treeList.list = result.data.treeList;
      // 触发
      emit("uplTreeId", result.data.id);
    })
    .catch((err) => {
      console.log("err==>", err);
      ElMessage.error("获取部门列表失败");
    });
};
</script>

<style lang="scss" scoped>
.category {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-box {
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    h2 {
      padding: 0;
      margin: 0;
      margin-right: 20px;
      font-size: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 30px;
      line-height: 30px;
    }
    .el-input {
      flex: 1;
    }
  }
  .list {
    flex: 1;
    overflow: auto;
  }
  .my-tree {
    :deep(.el-tree-node__content) {
      height: 36px;
    }
    :deep(.el-tree-node.is-current > .el-tree-node__content) {
      background-color: rgba(64, 158, 255, 0.4);
    }
    :deep(.el-tree-node > .el-tree-node__content) {
      transition: 0.2s;
    }
  }
}
</style>
